import React,{ Component } from 'react';
import './label.scss';
import '../../index/index.scss';
import { message } from 'antd';
import { signAccountList, signGroupList, editOrAddSign } from 'api/client.js';
import {
	Link
} from 'react-router-dom';
export default class Label extends Component{
	constructor (props) {
		super(props)
		this.state={
			labelList: [],
			groupList: [],
			classInfo: '',
			hiden: 'hiden',
			group_id: '',
			hide: 'hiden',
			sign_name: ''
		}
	}
	goBack () { //返回上一级
		this.props.history.goBack()
	}
	addlabel () { //添加标签
		this.setState({
			hide: '',
			sign_name: ''
		})
	}
	closeLabel () { // 关闭add标签
		this.setState({
			hide: 'hiden',
      sign_name: ''
		})
	}
	_editOrAddSign () { //编辑添加标签
		editOrAddSign({
			employee_id:10000,
			group_id: this.state.group_id,
			sign_name: this.state.sign_name
		}).then(res => {
			if(res.code === 1){
				this.setState({
					hide: 'hiden',
					labelList: [...this.state.labelList,{count: 0, sign_id: res.data.id, sign_name: this.state.sign_name, users: []}],
					sign_name: ''
				})
			} else {
				message.error(res.message,3)
			}
		})  
	}
	_signGroupList () { //标签分组
		signGroupList({
			need_sign: 0
		}).then(res => {
			if(res.code === 1){
				this.setState({
					groupList: res.data
				})
			}
		})
	}
	selectChange (name,id) { //模拟select
		this.setState({
			classInfo:name,
			hiden: 'hiden',
			group_id: id
		})
	}
	selectLabel () { //出现下拉框
		this.setState({
			hiden: this.state.hiden === '' ? 'hiden' : ''
		})
	}
	handChange (e) {
		if(e.target.value.length <=6){
			this.setState({
				sign_name: e.target.value
			})
		} else {
			this.setState({
				sign_name: e.target.value.slice(0,6)
			})
		}
	}
	componentDidMount(){
		document.title = '标签';
		signAccountList({
			employee_id: 10000
		}).then(res => {
			if(res.code === 1){
				this.setState({
					labelList: res.data
				})
			}
		})
		this._signGroupList()
	}
	render () {
		return(
			<div className="label">
				{/*<div className="title">
					<div onClick={this.goBack.bind(this)}><i className="glyphicon glyphicon-left"></i></div>
					<div>标签</div>
					<div></div>
				</div>*/}
				<div className="label_title">
					<div>标签列表</div>
					<div onClick={this.addlabel.bind(this)}><i className="glyphicon glyphicon-add"></i>新建标签</div>
				</div>
				{
					this.state.labelList.map((item,index) => {
						return(
							<Link to={
								{
									pathname: `${window.baseUrl}/client/labeltool`,
									state: {
										sign_id: item.sign_id
									}
								}
							} key={index}><div className="label_list">
								<p>{item.sign_name}({item.count})</p>
								<p>
								{
									item.users.map((v,i) => {
										return(
											<span key={i}>{v.account_user_name}，</span>
										)
									})
								}
								</p>
							</div></Link>
						)
					})
				}
				<div className={`label_add ${this.state.hide}`}>
					<div className="label_add_info">
						<p className="label_add_title">添加自定义标签</p>
						<input type="text" onChange={this.handChange.bind(this)} value={this.state.sign_name}/>
						<div className="label_add_class">
							<p>选择分类</p>
							<p className="label_add_select" onClick={this.selectLabel.bind(this)}>{this.state.classInfo}<i className="glyphicon glyphicon-down1"></i></p>
							<ul className={`label_add_option ${this.state.hiden}`}>
							{
								this.state.groupList.map((item,index) => {
									return(
										<li key={index} onClick={this.selectChange.bind(this,item.group_name,item.group_id)}>{item.group_name}</li>
									)
								})
							}
							</ul>
						</div>
						<div className="label_add_button">
							<p onClick={this.closeLabel.bind(this)}>取消</p>
							<p onClick={this._editOrAddSign.bind(this)}>确定</p>
						</div>
					</div>
				</div>
			</div>
		)
	}
}